<template>
  <div class="addBrankCard">
    <div class="main">
      <div class="li">
        <div class="left">
          <span>银行名称</span>
        </div>
        <div class="right">
          <input type="text" v-model="form.bankname" placeholder="请输入银行卡名称">
        </div>
      </div>
      <div class="li">
        <div class="left">
          <span>持卡人</span>
        </div>
        <div class="right">
          <input type="text" v-model="form.accountname" placeholder="请输入持卡人姓名">
        </div>
      </div>
      <div class="li">
        <div class="left">
          <span>银行卡号</span>
        </div>
        <div class="right">
          <input type="number" v-model="form.cardnumber" placeholder="请输入银行卡号">
        </div>
      </div>
    </div>
    <div class="line"></div>
    <div class="main">
      <div class="li liTip">
        <div class="leftTip">
          <span>设为默认银行卡</span>
        </div>
        <div class="right">
          <van-switch
            v-model="checked"
            @input="onInput"
            active-color="rgb(253, 193, 44)"
          />
        </div>
      </div>
    </div>
    <div class="btn" @click="submit()" v-if="methods === 'add'"><input type="button" value="确认新增"></div>
    <div class="btn" @click="submit()" v-if="methods === 'edit'"><input type="button" value="确认修改"></div>
    <div class="del" v-if="methods === 'edit'"><span @click="delBankCard"><img src="@/assets/images/ic_delete.png"
                                                                               alt="">删除银行卡</span></div>
  </div>
</template>

<script>
  /**
   * 新增银行卡
   * @Author zzl
   * @Date 2019/6/5 14:37.
   */
  import {Indicator} from 'mint-ui';
  import {Dialog} from 'vant';
  import utils from '@/lib/StringExtend';

  export default {
    mounted() {
      if (!utils.isNone(this.$route.query.form)) {
        this.form = this.$route.query.form;
        this.methods = 'edit';
        this.checked = this.form.is_default === 1 ? true : false;
      } else {
        this.methods = 'add'
      }
    },
    components: {},
    props: {},
    data() {
      return {
        methods: 'edit',
        checked: true,
        wechatId: utils.getCookie('wechat_id'),
        form: {
          accountname: undefined,
          bankname: undefined,
          cardnumber: undefined,
          is_default: 1,
        }
      }
    },
    computed: {},
    methods: {
      onInput(checked) {
        if (checked) {
          this.form.is_default = 1;
        } else {
          this.form.is_default = 0;
        }
      },
      submit() {
        if (utils.isNone(this.form.accountname)) {
          this.$toast('请输入银行名称');
          return false;
        } else if (utils.isNone(this.form.bankname)) {
          this.$toast('请输入持卡人名称');
          return false;
        } else if (utils.isNone(this.form.cardnumber)) {
          this.$toast('请输入银行卡号');
          return false;
        }
        if (this.methods === 'add') {
          this.addBankCard();
        } else if (this.methods === 'edit') {
          this.editBankCard();
        }
      },
      /*
      * 编辑
      * */
      editBankCard() {
        let params = Object.assign(this.form, {
          open_id: utils.getCookie('open_id_' + this.wechatId),
        });
        Indicator.open('加载中...');
        this.$axios.bankCardEdit(params).then(res => {
          Indicator.close();
          if (res.errcode !== '000') {
            this.$toast(res.errmsg);
            return;
          }
          this.$toast(res.errmsg);
          setTimeout(() => {
            this.$router.go(-1)
          }, 1000)
        })
      },
      /*
      * 添加
      * */
      addBankCard() {
        let params = Object.assign(this.form, {
          open_id: utils.getCookie('open_id_' + this.wechatId),
        });
        Indicator.open('加载中...');
        this.$axios.bankCardAdd(params).then(res => {
          Indicator.close();
          if (res.errcode !== '000') {
            this.$toast(res.errmsg);
            return;
          }
          this.$toast(res.errmsg);
          setTimeout(() => {
            this.$router.go(-1)
          }, 1000)
        })
      },
      /*
      * 删除
      * */
      delBankCard() {
        Dialog.confirm({
          title: '提醒',
          message: '是否删除该银行卡？',
          confirmButtonColor: 'rgb(253, 193, 44)'
        }).then(() => {
          let params = {
            card_id: this.form.card_id,
            open_id: utils.getCookie('open_id_' + this.wechatId),
          };
          Indicator.open('加载中...');
          this.$axios.bankCardDelete(params).then(res => {
            Indicator.close();
            if (res.errcode !== '000') {
              this.$toast(res.errmsg);
              return;
            }
            this.$toast(res.errmsg);
            setTimeout(() => {
              this.$router.go(-1)
            }, 1000)
          })
        });


      }
    },
    watch: {},
    filters: {},
    beforeDestroy() {

    }
  }
</script>

<style lang="less">

  .addBrankCard {
    width: 100%;
    height: 100%;
    background: white;

    .main {
      width: 100%;
      padding-left: 0.42rem;
      box-sizing: border-box;

      .li {
        width: 100%;
        height: 0.96rem;
        border-bottom: 1px solid #F6F6F6;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;

        .left {
          display: flex;
          flex-direction: column;
          width: 1.6rem;

          span {
            font-size: 0.26rem;
            color: #333333;
          }
        }

        .right {
          height: 100%;

          input {
            width: 5rem;
            height: 100%;
            font-size: 0.24rem;
            color: #999999;
            border: none;
          }
        }

      }

      .liTip {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .leftTip {
          width: 2rem;
          font-size: 0.26rem;
        }

        .right {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-right: 0.32rem;

          .van-switch, .van-switch--on {
            font-size: 22px !important;
          }
        }
      }
    }

    .btn {
      width: 6.96rem;
      height: 0.8rem;
      margin: 0 auto;
      margin-top: 2.6rem;

      input {
        font-size: 0.3rem;
        text-align: center;
        width: 6.96rem;
        height: 0.8rem;
        border: none;
        background: linear-gradient(45deg, rgba(253, 180, 5, 1), rgba(253, 204, 74, 1));
        border-radius: 0.4rem;
        color: white;
      }
    }

    .del {
      display: flex;
      justify-content: flex-start;
      color: #CECFD3;
      font-size: 0.26rem;
      margin-top: 0.36rem;
      padding-left: 0.38rem;
      box-sizing: border-box;

      span {
        display: flex;
        align-items: center;
      }

      img {
        width: 0.34rem;
        height: 0.36rem;
        margin-right: 0.1rem;
      }
    }
  }
</style>
